<template>
	<view class="pb120">
		<u-navbar title="详情" backIconColor="#fff" titleColor="#fff" :background="background"></u-navbar>
		<view class="home">
			<view class="title">标题</view>
			<view class="u-flex u-row-between">
				<view>2021-5-21</view>
				<view>
					<u-icon name="eye-fill" size="35" color="#2BC3C8" label="30 浏览" labelSize="24" class="u-m-r-30">
					</u-icon>
					<u-icon :name="showClick?'thumb-up-fill':'thumb-up'" size="32"
						:color="showClick?'#FF0000':'#2BC3C8' " label="30 点赞" labelSize="24" class="u-m-r-30"
						@click="click"></u-icon>
					<u-icon :name="showHeart ? 'heart-fill':'heart'" :color="showHeart?'#FF0000':'#2BC3C8'" label="收藏"
						labelSize="24" size="32" @click="heart"></u-icon>
				</view>
			</view>
		</view>
		<view class="comment">
			<view class="box u-row-between">
				<view>
					<input v-model="comment" placeholder="说点什么吧......" class="input"></input>
				</view>
				<view @click="mShow = !mShow">
					<u-icon name="red-packet" labelPos="bottom" label="打赏" size="38" labelSize="22"></u-icon>
				</view>
				<view @click="show = !show">
					<u-icon name="chat" labelPos="bottom" label="10" size="40" labelSize="22"></u-icon>
				</view>
			</view>
		</view>
		<view class="article-page">
		        <view class="article-content">
		            <!-- 处理文章内容文本 -->
		            <view v-html="article.content"></view>
		            <!-- 处理文章中的图片 -->
		            <view v-for="(image, index) in article.images" :key="index">
		                <image :src="image.src" :alt="image.alt" class="article-image"></image>
		            </view>
		        </view>
		    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 article: {
				                content: '这是一篇示例文章的内容部分，这里可以填充很多文字来模拟真实的文章内容。可以分段、添加图片描述等等，比如这里可以说一些关于某个主题的介绍，然后再深入阐述一些观点，还可以列举一些例子来支撑观点。',
				                // 如果文章中有图片，可添加如下格式的图片数组
				                images: [
				                    {
				                        src: '/static/zengle/烤肉.jpg',
				                        
				                    },
				                    {
				                        src: '/static/zengle/风景.jpg',
				                        
				                    }
				                ]
				            },
				show: false,
				mShow: false,
				background: {
					'background-image': 'linear-gradient(45deg, #2BC3C8, #84E7B9)'
				},
				detail: {
					content: '今夕何夕兮，搴舟中流。今日何日兮，得与王子同舟。蒙羞被好兮，不訾诟耻。心几烦而不绝兮，得知王子。山有木兮木有枝，心悦君兮君不知。'
				},
				showHeart: false,
				showClick: false,
				comment: ''
			}
		},
		onLoad() {

		},
		methods: {
			//收藏
			heart() {
				this.showHeart = !this.showHeart
			},
			click() {
				this.showClick = !this.showClick
			}
		}
	}
</script>

<style lang="scss" scoped>
	.article-page {
	    padding: 20rpx;
	
	   .article-header {
	        margin-bottom: 20rpx;
	
	       .article-title {
	            font-size: 32rpx;
	            font-weight: bold;
	        }
	
	       .article-author {
	            font-size: 24rpx;
	            color: #999;
	        }
	    }
	
	   .article-content {
	        line-height: 1.6;
	
	       .article-image {
	            width: 100%;
	            margin: 20rpx 0;
	        }
	    }
	}
	.title {
		font-size: 38rpx;
		font-weight: 700;
		padding: 20rpx 0;
	}

	.comment {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		border-top: 1rpx solid #ededed;

		.input {
			background-color: #f7f7f7;
			padding: 20rpx 15rpx;
			font-size: 26rpx;
			border-radius: 12rpx;
			width: 480rpx;
		}

		.box {
			display: flex;
			padding: 15rpx 30rpx;
		}
	}

	.pb120 {
		padding-bottom: 120rpx;
	}
	
	.wrap{
		display: flex;
		flex-wrap: wrap;
		padding-left: 12rpx;
		
		.item{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			flex: 0 0 30%;
			text-align: center;
			border: 1rpx solid #ededed;
			height: 100rpx;
			width: 100rpx;
			margin: 10rpx;
		}
	}
</style>
